import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Col, Row } from 'antd';
import type { CSSProperties, RefObject } from 'react';
import { useEffect, useState } from 'react';

type Props = {
  style?: CSSProperties;
  className?: string;
  controlRef: RefObject<HTMLElement>;
  defaultExpaned: boolean;
  filterText?: string;
};

const Fold = (props: Props) => {
  const {
    style = {},
    className,
    defaultExpaned,
    controlRef,
    filterText = '高级选项',
  } = props;
  const [expaned, seteExpaned] = useState<boolean>(defaultExpaned);
  useEffect(() => {
    const currentDom: HTMLElement = controlRef.current as HTMLElement;
    if (expaned) currentDom.style.display = '';
    else currentDom.style.display = 'none';
  }, [expaned, controlRef]);

  return (
    <Row
      align="middle"
      gutter={8}
      style={{
        cursor: 'pointer',
        color: '#1890ff',
        userSelect: 'none',
        ...style,
      }}
      className={className}
      onClick={() => seteExpaned(!expaned)}
    >
      <Col>{filterText}</Col>
      <Col>{expaned ? <UpOutlined /> : <DownOutlined />}</Col>
    </Row>
  );
};

export default Fold;
